<template>
  <pro-table
    ref="table"
    :columns="columns"
    :pagination="paginationConfig"
    :request="getList"
    :search="searchConfig"
    title="列表"
    @selectionChange="handleSelectionChange"
  >
    <template #operate="scope">
      <el-button
        size="mini"
        type="primary"
        @click="$router.push(`/auto/detail/${scope.row.id}`)"
      >
        详情
      </el-button>
    </template>
  </pro-table>
</template>

<script>
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { searchResultList } from '@/api/auto'

export default defineComponent({
  name: 'result',
  setup() {
    const state = reactive({
      // 表格列配置，大部分属性跟el-table-column配置一样
      columns: [
        { label: '序号', type: 'index' },
        { label: '服务名称', prop: 'serviceName', sortable: true, width: 180 },
        { label: '运行时间', prop: 'runTime' },
        { label: '总的用例数', prop: 'totalCase' },
        { label: '通过的用例数', prop: 'passCase' },
        { label: '通过率', prop: 'passingRate' },

        {
          label: '操作',
          width: 180,
          align: 'center',
          tdSlot: 'operate', // 自定义单元格内容的插槽名称
        },
      ],
      // 搜索配置
      searchConfig: {
        labelWidth: '90px', // 必须带上单位
        inputWidth: '360px', // 必须带上单位
        fields: [
          {
            type: 'text',
            label: '服务名称',
            name: 'serviceName',
            defaultValue: '',
          },

          {
            label: '用例集',
            name: 'testSet',
            type: 'select',
            defaultValue: 0,
            options: [
              {
                name: 'regression',
                value: 0,
              },
              {
                name: 'workflow',
                value: 1,
              },
            ],
          },
          {
            label: '运行方式',
            name: 'runType',
            type: 'radio',
            defaultValue: 0,
            options: [
              {
                name: 'staging CI',
                value: 0,
              },
              {
                name: 'timing trigger',
                value: 1,
              },
              {
                name: 'Regression',
                value: 2,
              },
              {
                name: 'pre-prd CI',
                value: 3,
              },
              {
                name: 'others',
                value: 4,
              },
            ],
          },
          {
            label: '时间范围',
            name: 'datetimerange',
            type: 'datetimerange',
            trueNames: ['beginTime', 'endTime'],
            style: { width: '360px' },
            defaultValue: ['2021-09-01 00:00:00', '2021-10-30 18:30:00'],
          },
        ],
      },
      // 分页配置
      paginationConfig: {
        layout: 'total, prev, pager, next, sizes', // 分页组件显示哪些功能
        pageSize: 10, // 每页条数
        pageSizes: [10, 20, 50, 100],
        style: { textAlign: 'left' },
      },
      created(params) {
        this.getList(params)
      },
      methods: {},
      showPercentage(params) {
        return params * 100 + '%'
      },
      // 请求函数
      async getList(params) {
        console.log(params)
        // params是从组件接收的，包含分页和搜索字段。
        const { data } = await new Promise(rs => {
          setTimeout(() => {
            searchResultList(params)
              .then(rs)
              .catch()
          }, 3000)
        })

        // 必须要返回一个对象，包含data数组和total总数
        return {
          data: data.list,
          total: data.total,
        }
      },
    })
    const table = ref(null)
    const refresh = () => {
      table.value.refresh()
    }

    return { ...toRefs(state), refresh, table }
  },

  methods: {
    clike(parms) {
      this.$router.push('/home')
    },
  },
})
</script>
